<template>
  <div class="Rmenu">
    <template v-if="rmenu">
      <div ref="rmenu" :style="rmenuStyle" class="rmenuArea" @contextmenu.prevent="">
        <RmenuItem :rmenu="rmenu.btn" :direction="subDirection" />
      </div>
      <!-- <div
        class="rmenuMask"
        @click="closeRmenu"
        @contextmenu.prevent="closeRmenu"
      /> -->
    </template>
  </div>
</template>
<script>
/* 
  ┌─────────────────────────────────┐
  │ 右键菜单                      ┤
  └─────────────────────────────────┘
    {
      label:'名称',
      color:'', //文字颜色 默认#333黑 使用css color值
      icon:'图标', //字体图标class名
      type:'', //single单色|colorful多色|默认是多色
      iconColor:'', //图标颜色 默认.5黑 使用css color值
      cb(){
        //点击后的回调
      }
    }
  ————————————————————————————————————
    rmenu菜单控制器saveRmenu在desk内
    调用saveRmenu将菜单存储
    传入aim 被点击的按钮实例,btn 菜单数组
    
    showRmenu(e) {
      let btn = [];
      for(let i = 0; i<10; i++){
        btn.push({
          label:'菜单'+i,
          cb(){
            console.info("cb",i)
          }
        })
      }
      this.saveRmenu({
        aim:'x',
        width:200, //宽度 number，默认200，px为单位
        btn
      });
    },
*/
export default {
  name: "Rmenu",
  computed: {
    rmenu() {
      return this.$store.state.desk.rmenu
    },
    rmenuStyle() {
      let rmenu = this.rmenu
      let width = rmenu.width ? parseInt(rmenu.width) + "px" : "200px"
      let height = rmenu.btn.length * 32 + 16 + "px"
      return {
        top: rmenu.top + "px",
        left: rmenu.left + "px",
        width,
        height,
      }
    },
    subDirection() {
      let { top, left, width, height } = this.rmenuStyle
      const w = document.body.clientWidth,
        h = document.body.clientHeight,
        subHeight = this.rmenu.btn.length * 32 + 16
      top = parseInt(top)
      left = parseInt(left)
      width = parseInt(width)
      height = parseInt(height)
      let direction = ""
      if (w - left - width < 180) {
        //超出右边界
        direction += "l"
      } else {
        // 其它情况
        direction += "r"
      }
      if (top < subHeight) {
        // 超出上边界
        direction += "t"
      } else {
        if (h - top - height < subHeight) {
          // 超出下边界
          direction += "b"
        } else {
          // 其它情况
          direction += "t"
        }
      }
      return direction
    },
    positionChange() {
      const { top, left } = this.rmenu
      return top && left ? true : false
    },
  },
  watch: {
    positionChange: {
      handler: function (n, o) {
        if (n) {
          this.$setTimeout(() => {
            let rmenuRef = this.$refs.rmenu
            let rmenu = this.rmenu
            let { top, left } = rmenu
            let dh = document.body.clientHeight
            let dw = document.body.clientWidth
            let h = rmenuRef.clientHeight
            let w = rmenuRef.clientWidth
            let topChange = false,
              leftChange = false
            if (h + top > dh) {
              rmenu.top = top - h
              topChange = true
            }
            if (w + left > dw) {
              rmenu.left = left - w
              leftChange = true
            }
            if (topChange || leftChange) {
              this.$store.commit("desk/saveRmenu", rmenu)
            }
          })
        }
      },
    },
  },
  methods: {
    closeRmenu() {
      if (this.rmenu) {
        this.$store.commit("desk/saveRmenu", false)
      }
    },
    changeRmenu(aim) {
      //右键重置按钮位移 20220106弃用
      let { btn } = this.rmenu
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
  },
}
</script>
<style lang="scss" scoped>
.Rmenu {
  position: fixed;
  z-index: 19910608;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  user-select: none;
  .rmenuArea {
    position: absolute;
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.5rem;
    min-width: 10rem;
    max-width: 20rem;
    min-height: 3rem;
    max-height: 20rem;
    z-index: 2;
    padding: 0.5rem 0;
    // overflow-y: auto;
    // overflow-x: visible;
  }

  .rmenuMask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
  }
}
</style>
